<template lang="pug">
  el-row(style="width:100%;height:100%")
    el-col(:span="24", style="width:100%;height:100%" )
      div.grid-content.red-list(style="width:100%;height:100%")
        .summary-title 活动概览
        el-row.summary-content(:gutter="20")
          el-col(:span="4")
            .grid-content.bg-purple
              .title 进行中活动
              .value 2
          el-col(:span="4")
            .grid-content.bg-purple
              .title 参与门店数
              .value 3624
          el-col(:span="4")
            .grid-content.bg-purple
              .title 商品扫码次数
              .value 26599
          el-col(:span="4")
            .grid-content.bg-purple
              .title 领取红包个数
              .value 26599
          el-col(:span="8")
            .grid-content.bg-purple
              .title 领取总金额（元）/红包总金额（元）
              .value 16892.56/30000.00
        .summary-title 活动概览
          span 共3条
        .summary-filter
          el-input(placeholder="输入红包名称", suffix-icon="el-icon-search", v-model="name", style="width:200px;margin-right:20px")
          el-select(v-model="status", placeholder="活动状态", style="width:250px;margin-right:20px")
            el-option(label="全部", value="1")
            el-option(label="未开始", value="2")
            el-option(label="进行中", value="3")
            el-option(label="已结束", value="4")
          el-date-picker(v-model="date1", type="datetime", placeholder="开始时间", style="width:250px;margin-right:20px")
          span(style="margin-right:20px") 至
          el-date-picker(v-model="date2", type="datetime", placeholder="结束时间", style="width:250px;margin-right:20px")
          el-button.el-table__fixed-right 创建红包
        .summary-date
          el-table(:data="tableData", :stripe="true", :border="false", style="width: 100%")
            el-table-column(prop="number", label="", width="65")
            el-table-column(prop="name", label="红包名称", width="470")
            el-table-column(prop="status", label="活动状态", width="120")
            el-table-column(prop="time", label="活动时间", width="370")
            el-table-column.preview(label="预览", width="120")
              template(slot-scope="scope")
                .el-icon-view.icon 查看
            el-table-column.statistics(label="实时统计", width="120")
              template(slot-scope="scope")
                .el-icon-view.icon 查看
            el-table-column.award(label="获奖名单", width="120")
              template(slot-scope="scope")
                .el-icon-view.icon 查看
            el-table-column.operate(label="操作", width="240")
              template(slot-scope="scope")
                .el-icon-edit-outline.icon 编辑
                .el-icon-circle-close-outline.icon 关闭
        .summary-pagination
          el-pagination(@size-change="paginationHandleSizeChange", @current-change="paginationHandleCurrentChange", :current-page.sync="currentPage", :page-sizes="[20, 40, 60, 80]", :page-size="100", layout="sizes, prev, pager, next", :total="1000")
</template>

<script>
  export default {
    data() {
      return {
        name: '',
        status: '',
        date1: '',
        date2: '',
        tableData: [{
          number: '1',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '2',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }, {
          number: '3',
          name: '永通15周年庆典',
          status: '进行中',
          time: '2018-08-15  10:00:00 至 2018-09-15  10:00:00 '
        }],
        currentPage: 5
      }
    },
    mounted: function () {
      this.$nextTick(() => {
        // 将内容页高度设置100%
        const orderHeight = document.documentElement.clientHeight - 80;
        document.querySelector('.el-main').style.height = orderHeight + 'px';
        document.querySelector('.el-main').style.background = '#fff';
      });
    },
    methods: {
      paginationHandleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      paginationHandleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
</script>

<style lang="scss">
  .red-list {
    position: relative;
    height: 100%;
    .summary-title {
      font-size: 18px;
      font-weight: 800;
      span {
        font-size: 13px;
        color: #999;
        font-weight: 500;
        margin-left: 20px;
      }
    }
    .summary-content {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 1px #eee solid;
      width: 60%;
      padding: 20px 0;
      .el-col {
        border-right: 1px solid #ddd;
        &:last-child {
          border-right: none;
        }
      }
      .grid-content {
        text-align: center;
        .title {
          font-size: 12px;
          color: #999;
        }
        .value {
          font-size: 30px;
          color: $main-style-red;
        }
      }
    }
    .summary-filter {
      position: relative;
      margin-top: 20px;
      .el-table__fixed-right {
        right: 20px;
        background-color: $main-style-red;
        color: #fff;
      }
    }
    .summary-date {
      margin-top: 20px;
      td, th {
        border: 1px solid #ebeef5;
      }
      td:nth-child(5) .icon,
      td:nth-child(6) .icon,
      td:nth-child(7) .icon {
        font-size: 14px;
        cursor: pointer;
        color: $main-style-red;
        &:before {
          font-size: 15px;
          margin-right: 5px;
        }
      }
      td:nth-child(8) .icon {
        font-size: 14px;
        cursor: pointer;
        &:before {
          font-size: 15px;
          margin-right: 5px;
        }
        &:first-child {
          margin-right: 50px;
        }
      }
    }
    .summary-pagination {
      margin: 20px 0;
      text-align: center;
    }
  }
</style>
